<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word 转 HTML</title>
  <style>
	 *{
		  padding: 0;
		  margin: 0;
	  }
	  body{
		  margin: 10px;
	  }
	  table {
	    border-collapse: collapse;
	    width: 100%;
	  }
	  
	  table, th, td {
		  padding: 5px;
	    border: 1px solid black;
	  }

  </style>
</head>
<body>
  <input type="file" id="upload" />
  <div id="output"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
  <script>
    document.getElementById('upload').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const arrayBuffer = e.target.result;
          // 使用 Mammoth 将 .docx 转换为 HTML
          mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
            .then(function (result) {
              document.getElementById('output').innerHTML = result.value;
            })
            .catch(function (err) {
              console.log(err);
            });
        };
        reader.readAsArrayBuffer(file);
      }
    });
  </script>
  
  <button id="download-btn">下载 PDF</button>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
  <script>
  	document.getElementById('download-btn').addEventListener('click', () => {
  		const element = document.getElementById('output');
  		
  		// margin: PDF 的边距，单位为英寸，默认为 1 英寸。
  		// filename: 下载时生成的文件名。
  		// image: 配置图像类型和质量（例如：JPEG 图像，质量为 0.98）。
  		// html2canvas: 用于绘制 HTML 元素的选项。scale 控制图像质量，通常设置为 2 可提高质量。
  		// jsPDF: 设置页面的单位、格式（如 letter、a4）和方向（portrait 为纵向，landscape 为横向）。
  		
  		// 定义配置项
  		const opt = {
  			margin: 1, // 页面边距，单位是英寸
  			filename: 'document.pdf', // PDF 文件名称
  			image: {
  				type: 'jpeg',
  				quality: 0.98
  			}, // 图像质量
  			html2canvas: {
  				scale: 2
  			}, // 画布缩放，默认为1，增大此值可以提高 PDF 清晰度
  			jsPDF: {
  				unit: 'mm', // in、mm
  				format: 'a4',
  				orientation: 'landscape'
  			} // 页面格式
  		};
  
  		// 使用 html2pdf 生成 PDF
  		html2pdf(element, opt);
  
  		// 使用 html2pdf 将 HTML 转换为 PDF
  		// html2pdf()
  		// 	.from(element)
  		// 	.save('example.pdf'); // 保存 PDF 文件
  	});
  </script>
  
</body>
</html>
